<template>
  <div>
    <div class="top"></div>
    <van-row type="flex" justify="center">
      <div class="headImg">
        <img src="../../assets/cover.jpg">
      </div>
    </van-row>

    <van-panel >
      <van-field
        v-model="userName"
        type="text"
        label="用户名"
        left-icon="contact"
        placeholder="请输入用户名"
      />
      <van-field
        v-model="userPsd"
        type="password"
        label="密码"
        left-icon="records"
        placeholder="请输入密码"
      />
      <van-field
        v-model="userPsd1"
        type="password"
        label="确认密码"
        left-icon="records"
        placeholder="请确认密码"
      />
      <div style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px">请选择密保</div>
      <van-checkbox-group v-model="result" :max="1">
        <van-cell-group>
          <van-cell
            v-for="(item,index) in list"
            clickable
            :key="index"
            :title="`密保 ${item}`"
          >
            <van-checkbox :name="item" ref="checkboxes" />
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <van-field
        v-model="userText"
        type="text"
        label="密保答案"
        placeholder="请输入密保答案"
      />
      <div slot="footer" style="margin-bottom: 20px">
        <van-row type="flex" justify="space-around">
          <van-button size="normal" type="primary" @click="submit()">确认找回</van-button>
          <van-button size="normal" type="primary" @click="login()">登录</van-button>
        </van-row>
      </div>
    </van-panel>
    <div class="bottom"></div>
  </div>
</template>

<script>
  import {baseUrl} from '../constants'

  export default {
  name: 'findPassword',
  data () {
    return {
      userName: '',
      userPsd: '',
      userPsd1: '',
      list: ['对你影响最深的人', '你高中班主任姓名', '你最爱的人的姓名'],
      result: [],
      userText: ''
    }
  },
  methods: {
    login(){
      this.$router.push('/user');
    },
    submit(){
      if(this.result[0]&&this.userText){
        let index
        for(let i = 0;i<this.list.length;i++){
          if(this.result[0]==this.list[i]);{
            index=i;
            break;
          }
        }
        //进行数据提交
        if(this.userPsd==this.userPsd1){
          let data = {
             userName:this.userName,
             problemID:index,
            problemAnswer:this.userText,
            userPsd:this.userPsd
          }
          this.axios.put(baseUrl.serverUrl+'/user',data).then(res=>{
            if(res.data.status==1){
              this.$dialog.alert({
                message:'找回密码成功'
              })
            }else {
              this.$dialog.alert({
                message:'找回密码失败'
              })
            }
          })
        }else {
          this.$dialog.alert({
            message:'2次输入密码不一致'
          })
        }
      }
    }
  }
}
</script>

<style scoped>
  .headImg {
    width: 100%;
    height: 400px;
  }
  .headImg img {
    width: 100%;
    height: 100%;
  }
</style>
